<template>

  <view-box  >
    <x-header slot="header" title="首页" :left-options="{showBack:false}"></x-header>
    <a href="http://www.runoob.com">点击我</a>

<!--
    <div @touchstart="touchstartOut"  @touchend="touchend" @click="clickHandle" @mousedown="mousedownHandle"  @mouseup="mouseupHandle">


      <x-input class="xinput1" value="郭" placeholder="这是点位符"></x-input>

      <div class="oriInput1">
        <input type="text" placeholder="你好">
      </div>


      <x-input  @touchstart.native="touchstartHadle" class="xinput2" value="郭" placeholder="这是点位符"></x-input>

      <div @touchstart="touchstartHadle" class="oriInput2">
        <input type="text" placeholder="你好">
      </div>






    <div class="cont" @touchstart="touchstartHadle" @touchend="touchend" @click="clickHandle" @mousedown="mousedownHandle"  @mouseup="mouseupHandle">

    </div>

    </div>
-->


    <div >


      <x-input class="xinput1" value="郭" placeholder="这是点位符"></x-input>

      <div class="oriInput1">
        <input type="text" placeholder="你好">
      </div>


      <x-input  class="xinput2" value="郭" placeholder="这是点位符"></x-input>

      <div class="oriInput2">
        <input type="text" placeholder="你好">
      </div>






      <div class="cont" >

      </div>

    </div>



  </view-box>

</template>


<script>

  import XInput from "vux/src/components/x-input/index";
  export default {
    name: "Home",
    components: {XInput},
    methods:{
      touchstartHadle:function (event) {
        debugger;
        console.log("touchstartHadle",event)
      },
      touchstartOut:function (event) {
        debugger;
        console.log("touchstartOut",event)
      },
      clickHandle:function (event) {
        debugger;
        console.log("clickHandle",event)
      },

      mouseupHandle: function (event) {
          debugger;
          console.log("mouseupHandle",event)
        },

      mousedownHandle:function (event) {
        debugger;
        console.log("mousedownHandle",event)
      },
      touchend:function (event) {
        debugger;
        console.log("touchend",event)
      },
    }
  }
</script>


<style lang="scss">

  .cont {
    height: 100vh;
  }

  input {
    background-color: red !important;

  }


  .xinput {
    background-color: green !important;
  }

</style>
